<template>
  <el-dialog
    :title="
      modalData.id
        ? $t('workOrderClient.Modify')
        : $t('workOrderClient.creatWorkOrder')
    "
    :visible="visible"
    destroy-on-close
    @close="onClose"
    @open="onOpen"
  >
    <el-form :ref="refName" :model="ruleForm" label-width="85px" :rules="rules">
      <el-form-item :label="$t('workOrderClient.orderName')" prop="orderName">
        <el-input
          v-model="ruleForm.orderName"
          :placeholder="$t('workOrderClient.orderName')"
        />
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('workOrderClient.typeName')" prop="typeCode">
            <el-select
              v-model="ruleForm.typeCode"
              :placeholder="$t('workOrderClient.chooseType')"
            >
              <el-option
                v-for="(wotItem, index) in woTypeList"
                :key="index"
                :label="wotItem.dictValue"
                :value="wotItem.dictKey"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('workOrderClient.moduleName')"
            prop="moduleCode"
          >
            <el-select
              v-model="ruleForm.moduleCode"
              :placeholder="$t('workOrderClient.chooseModul')"
            >
              <el-option
                v-for="(wotItem, index) in moduleDictList"
                :key="index"
                :label="wotItem.dictValue"
                :value="wotItem.dictKey"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item :label="$t('workOrderClient.problem')" prop="description">
        <el-input
          v-model="ruleForm.description"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 6 }"
          :placeholder="$t('workOrderClient.inputProblem')"
        />
      </el-form-item>

      <!-- 上传图片 -->
      <el-form-item :label="$t('workOrderClient.picture')">
        <Rupload v-model="ruleForm.imagesBusinessId" is-img class="uploadPic" />
      </el-form-item>

      <el-form-item :label="$t('workOrderClient.accessory')">
        <Rupload v-model="ruleForm.fileBusinessId" />
      </el-form-item>
    </el-form>

    <span slot="footer" style="text-align: center">
      <el-button type="primary" :loading="loading" @click="onSubmit">
        {{ $t('btns.submit') }}
      </el-button>
      <el-button @click="onClose">
        {{ $t('btns.cancel') }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
// import { Message } from 'element-ui'
import { editWo } from '@/api/workOrder'
import { uploadConfig } from '@/api/file'
import Rupload from '@/components/r-upload'

export default {
  name: 'OrderEdit',
  components: { Rupload },
  props: {
    visible: {
      default: false,
      type: Boolean
    },
    modalData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      refName: 'ruleForm',
      fileCongfig: {},
      rules: {
        orderName: [
          {
            required: true,
            message: this.$t('workOrderClient.inputTitle'),
            trigger: 'blur'
          },
          {
            max: 30,
            message: this.$t('workOrderClient.thirtyWord'),
            trigger: 'blur'
          }
        ],
        typeCode: [
          {
            required: true,
            message: this.$t('workOrderClient.chooseType'),
            trigger: 'blur'
          }
        ],
        moduleCode: [
          {
            required: true,
            message: this.$t('workOrderClient.chooseModul'),
            trigger: 'blur'
          }
        ],
        description: [
          {
            required: true,
            message: this.$t('workOrderClient.inputProblem'),
            trigger: 'blur'
          },
          {
            max: 500,
            message: this.$t('workOrderClient.fiftyWord'),
            trigger: 'blur'
          }
        ]
      },
      ruleForm: {},
      // 图片List
      imagesList: [],
      // 附件list
      attachmentsList: []
    }
  },
  computed: {
    ...mapGetters(['dicMap', 'dicCodes', 'loading']),
    woType() {
      return this.dicCodes['workOrderType']
    },
    moduleCode() {
      return this.dicCodes['workOrderModule']
    },
    woTypeList() {
      return this.dicMap[this.woType]
    },
    moduleDictList() {
      return this.dicMap[this.moduleCode]
    }
  },
  mounted() {
    this.$store.dispatch('common/getI18nDict', this.woType)
    this.$store.dispatch('common/getI18nDict', this.moduleCode)
    this.fileCongfig = uploadConfig()
  },
  methods: {
    onClose() {
      this.$refs[this.refName].resetFields()
      this.ruleForm = {}
      this.$emit('update:visible', false)
    },
    onOpen() {
      this.ruleForm = Object.assign({}, this.modalData)
    },
    onSubmit() {
      this.$refs[this.refName].validate(valid => {
        if (!valid) {
          return
        }

        this.onEditWo(Object.assign({}, this.ruleForm))
      })
    },
    //  编辑 工单
    async onEditWo(data) {
      const { success } = await editWo(data)
      if (success) {
        this.onClose()
        this.$emit('onSearch')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.hide-upload-btn {
  >>> .el-upload--picture-card {
    display: none;
  }
  .do-upload-btn {
    display: none;
  }
}

.el-textarea {
  >>> .el-textarea__inner {
    min-height: 100px !important;
    // height: 48px;
  }
}
.uploadPic {
  >>> .el-upload {
    width: 80px;
    height: 80px;
    line-height: 90px;
  }
}
</style>
